<!--suppress ALL -->
<template>
  <div class="page" data-page="assetsFmap" style="z-index: 2;">
    <div class="link-page-nav">
        <a href="#" class="link back" @click="$root.backToTab()">
            <i class="iconfont icon-zuo"></i>
        </a>
    </div>
    <div class="link-page-top">
        <div class="link-page-title">室内地图</div>
    </div>
    <div class="page-content">
        <div id="eqmentFmap_map" style="width: 100%;height: 100%;"></div>
        <div id="decter_layer_content">
            <img src="" class="decter_layer_pic" id="decter_layer"  alt="" />
        </div>
    </div>
  </div>
</template>
<style>
    #decter_layer_content{
        width: 100%;
        position: relative;
        height: 0;
        padding-bottom: 56.25%;
        display: none;
    }
    .decter_layer_pic{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
</style>
<script>
   return {
      data: function () {
          return {
            assetsId: this.$route.params.assetsId,
            eqmentFmap:"",
          }
      },
      methods: {
          getFmapData:function(){
              var self = this;
              jQuery("#eqmentFmap_map").empty();
              Dao.assetsLocationInfo({
                  userName: userInfor.accountName,
                  deviceId: appKeyObj.deviceId,
                  assetsId: this.assetsId * 1,
              }, function(data) {
                  if(data){
                      if(data.markType==1){
                        self.fMap_eqment(data);
                      }else if(data.markType==2){
                        jQuery("#eqmentFmap_map").hide();
                        jQuery("#decter_layer_content").show();
                        //分层图展示
                        if(data && data.layeredGraphUrl){
                            jQuery("#decter_layer").attr("src",data.layeredGraphUrl);
                            self.decterAddpoints(data.picturesMaker);
                        } 
                      }else{
                        $("#eqmentFmap_map").show();
                        jQuery("#eqmentFmap_map").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                      }
                      
                  }
              });
          },
          fMap_eqment: function(dataLocation) {
              var self = this;
              Dao.getIndoorInfoByOrg({
                  userName: userInfor.accountName,
                  deviceId: appKeyObj.deviceId,
                  organizationId: dataLocation.organizationId
              }, function(data) {
                  if (data != null) {
                      jQuery("#eqmentFmap_map").show();
                      jQuery("#decter_layer_content").hide();
                      createMap(data,"eqmentFmap_map",2,dataLocation);
                  } 
              }, false);
          },
          decterAddpoints:function(data) {
              var self = this;
              var $ = this.$;
              for (var i = 0; i < data.length; i++) {
                  self.decterAddMark(data[i]);
              }
          },
          decterAddMark:function(data) {
              var container = document.getElementById('decter_layer_content');
              var defaultWidAndH = 20; //初始大小
              var defaultWidAndH_alert = 26;
              var currentWidAndh = defaultWidAndH*0.7;
              var currentWidAndh_alert = defaultWidAndH_alert*0.7;
              var imgOffset = 0 - currentWidAndh / 2 + "px"; //偏移量
              var imgOffset_alert = 0 - currentWidAndh_alert / 2 + "px";
              var x = data.xAxis;
              var y = data.yAxis;
              var makeName = data.makeName; //提示框标题
              var markimage = data.url; //图标url
              var markimage_alertBg = data.alertUrl; //警情种类背景色，放在正常icon底部
              // var pointid = data.relateFcfIds;
              //组合唯一id
              var img = document.createElement("img");
              self.eqmentFmap.moveTo()
              $(img).attr({
                  "src": markimage,
                  // "id": "mark_normal_"+pointid,
                  "class": "markpic"
              }).css({
                  "width": currentWidAndh + "px",
                  "height": currentWidAndh + "px",
                  "position": "absolute",
                  "left": x + "%",
                  "top": y + "%",
                  "cursor": "pointer",
                  "margin-top": imgOffset,
                  "margin-left": imgOffset,
                  "border-radius": currentWidAndh / 2
              });
              if (markimage_alertBg) {
                  var img_alert = document.createElement("img");
                  $(img_alert).attr({
                      "src": markimage_alertBg,
                      // "id": "mark_alert_"+pointid,
                      "class": "markpic"
                  }).css({
                      "width": currentWidAndh_alert + "px",
                      "height": currentWidAndh_alert + "px",
                      "position": "absolute",
                      "left": x + "%",
                      "top": y + "%",
                      "cursor": "pointer",
                      "margin-top": imgOffset_alert,
                      "margin-left": imgOffset_alert,
                      "border-radius": currentWidAndh_alert / 2
                  });
                  container.appendChild(img_alert);
              }
              container.appendChild(img);
          },
      },
      on:{
        pageInit: function(e, page) {
            var self = this;
            self.getFmapData();
            jQuery("#decter_layer_content").each(function () {
                new RTP.PinchZoom(jQuery(this), {});
            });
        },
        pageBeforeRemove: function(e, page) {
          var self = this;
          if (self.eqmentFmap) {
            self.eqmentFmap.dispose();
          }
        },
      }
   }
</script>